<template>
  <a-modal
    :open="open"
    width="1260px"
    title="视光其他高级检索"
    :ok-button-props="{ disabled: !selectItem.id }"
    centered
    ok-text="确定"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="flex justify-between items-center">
      <a-form :model="formState" class="form-style-flex flex-1">
        <a-form-item label="项目" class="w-1/3">
          <a-input v-model:value="formState.zjm" placeholder="名称/助记码/条形码" @press-enter="getData()" />
        </a-form-item>
        <a-form-item name="categroyId" label="商品分类" class="w-1/3">
          <a-tree-select
            v-model:value="formState.categroyId"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            :field-names="{ label: 'categroyName', value: 'id' }"
            allow-clear
            :tree-data="categoryList"
            @select="getData()"
          />
        </a-form-item>
        <a-form-item label="型号" class="w-1/3">
          <a-input v-model:value="formState.modelNumber" placeholder="请输入" @press-enter="getData()" />
        </a-form-item>
      </a-form>
      <div class="w-40 text-center">
        <a-button type="primary" @click="getData">检索</a-button>
      </div>
    </div>
    <BaseTable
      :loading="loading"
      column-code="000447"
      :custom-row="(record) => ({ onClick: () => onSelect(record), onDblclick: () => onDbSelect(record) })"
      :row-class-name="(record) => (record.id === selectItem.id ? 'selected-row' : '')"
      :height="500"
      :data-source="tableData"
      bordered
      row-key="id"
      :scroll="{ x: 1600 }"
      :pagination="pagination"
    >
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'xh'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'mc'">
          <MedicineInfo :value="{ mc: record.mc, gg: record.gg }" />
        </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
// import { message } from 'ant-design-vue'
// import { post } from '@/utils/request'
// import { formatAmount } from '@/utils/format.js'

const emit = defineEmits(['update:open', 'ok', 'select'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  formItem: {
    type: Object,
    default: () => ({})
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const formState = ref({})
const selectItem = ref({})
const categoryList = ref([])
const onCancel = () => {
  formState.value = {}
  emit('update:open', false)
}
const { loading, tableData, pagination, getData } = useTable({
  url: '/optometry/ooadolescentcheck/getDictOoProductSkuGJ',
  formatParams: () => {
    return {
      ...formState.value,
      categroyId: formState.value.categroyId ? [formState.value.categroyId] : []
    }
  },
  immediate: false,
  onSuccess: () => {
    // tableData.value = [{}]
  }
})
const onOk = async () => {
  emit('select', selectItem.value)
  formState.value = {}
  emit('update:open', false)
}
const onSelect = (record) => {
  selectItem.value = record
}
const onDbSelect = (record) => {
  emit('select', record)
  formState.value = {}
  emit('update:open', false)
}
const getCategoryList = async () => {
  const { code, data } = await post('/operation/opex/getOoCategroyList', { status: 1 })
  if (code === 0) {
    categoryList.value = data
  }
}

watch(
  () => props.open,
  (val) => {
    if (val && Object.keys(props.rowData).length) {
      formState.value.xmlbs = formatLb(props.rowData.payItemType)
      // formState.value.astigmatism = props.formItem.astigmatism
      // formState.value.diopter = props.formItem.diopter
      getCategoryList()
      getData()
    }
  }
)
const formatLb = (val) => {
  if (val === '60') {
    return ['60']
  } else if (val === '61' || val === '62' || val === '63') {
    return ['61', '62', '63']
  } else {
    return ['64', '65']
  }
}
</script>
<style lang="less" scoped>
.right-border-pro {
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}
.patient-info-header {
  background-color: var(--primary-color);
  border-radius: 3px;
}
</style>
